<template>
  <div class="druglist">
    <nuxt-link target="_blank" :to="'/drugDetail/' + item.id + '.html'" class="drug_card" v-for="(item,index) in drugList" :key="index">
      <img src="@/static/images/drug/drug_test.png" class="drug_img">
      <div class="drug_name">{{ item.nameEn }}</div>
      <div class="info">Manufacturer: {{ item.manufacturer }}</div>
      <div class="info">Specification: {{ item.specifications }}</div>
      <div class="original_price">${{ item.originalPrice }}</div>
      <div class="current_price">${{ item.price }}</div>
    </nuxt-link>
  </div>
</template>

<script>
export default {
  props:['drugList']
}
</script>

<style lang="scss" scoped>
.druglist{
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 24px;
  .drug_card{
    margin-bottom: 40px;
    padding: 0 16px 20px 16px;
    margin-right: 10px;
    cursor: pointer;
    .drug_img{
      width: 232px;
      height: 232px;
    }
    .drug_name{
      font-weight: bold;
      font-size: 16px;
      color: #2E343E;
      line-height: 14px;
      margin-bottom: 8px;
    }
    .info{
      font-weight: 400;
      font-size: 14px;
      color: #616469;
      line-height: 24px;
    }
    .original_price{
      margin-top: 8px;
      font-weight: 400;
      font-size: 14px;
      color: #8A95A2;
      line-height: 14px;
      text-decoration-line:line-through;
    }
    .current_price{
      font-weight: bold;
      font-size: 24px;
      color: #0041A3;
      line-height: 24px;
    }
  }
}
</style>